<template>
	<view class="waterfall">
		<view class="waterfall-item" v-for="(item, index) in items" :key="index" :style="{width: itemWidth + 'px'}">
			<!-- 这里放置要展示的内容 -->
			<image :src="item.src"></image>
		</view>
	</view>
</template>

<script>
	
	export default {
		name: "ProductList",
		data() {
			return {
				items: [], // 数据
				itemWidth: 200,
			};
		},
		mounted() {
			// 假设这是获取数据的方法
			this.fetchData();
		},
		methods: {
			fetchData() {
				// 模拟数据请求
				this.items = [...Array(20).keys()].map(i => ({
					src: `https://picsum.photos/seed/${i}/200`
				}));
			}
		}
	}
</script>

<style lang="scss">
	.waterfall {
		display: flex;
		flex-wrap: wrap;
	}

	.waterfall-item {
		margin-bottom: 10rpx;
		/* 设置你需要的间距 */
	}
</style>